<template>
  <section v-if="info">
    <div class="content-title">{{ title }}</div>
    <div class="weather">
      <div>
        <div> 温度 <span>{{ info.real.weather.temperature }} </span>°C</div>
        <div> 相对湿度 <span>{{ info.real.weather.humidity }} </span>%</div>
      </div>
      <div>
        <div> {{ info.real.wind.direct.split('风')[0] +
          info.real.wind.degree + '° ' +
          info.real.wind.speed + '级 ' +
          info.real.wind.power }}
        </div>
        <div> {{ info.predict.station.city + ' ' + info.real.weather.info }} </div>
      </div>
    </div>
  </section>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
import axios from 'axios';
import { onMounted, ref } from 'vue';
// 获取天气
const info = ref(null)
onMounted(() => {
  getWheather()
})
const getWheather = () => {
  let url = 'http://www.nmc.cn/rest/weather?stationid=cqsJg'
  axios.get(url).then(res => {
    info.value = res.data.data
  })
}
</script>
<style scoped lang="scss">
.weather {
  >div {
    display: flex;
    justify-content: space-between;

    >div {
      margin-right: 10px;
      font-size: 14px;
    }

    >div:nth-child(1),
    >div:nth-child(2) {
      >span {
        font-size: 44px;
        margin-right: 10px;
      }
    }
  }

}
</style>
